<template>
  <div>
    <n-card
      title="视频"
      embedded
      bordered
      @click="showModal = true"
      style="width: 100px; height: 100px"
    >
    </n-card>
    <n-modal
      v-model:show="showModal"
      preset="dialog"
      title="播放"
      :mask-closable="false"
      style="width: 1000px"
    >
      <div v-if="showModal">
        <vue3videoPlay
          width="900px"
          :src="options.src"
          :poster="options.poster"
          @play="onPlay"
          @pause="onPause"
          @timeupdate="onTimeupdate"
          @canplay="onCanplay"
        />
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// require style
import vue3videoPlay from "vue3-video-play";
// 引入组件
import "vue3-video-play/dist/style.css";

// 引入css
const showModal = ref(false);
const props = defineProps(["file"]);
const options = reactive({
  src: props.file, //视频源
  poster: "", //封面
});
const onPlay = ev => {
  console.log(ev, "播放");
};
const onPause = ev => {
  console.log(ev, "暂停");
};

const onTimeupdate = ev => {
  console.log(ev, "时间更新");
};
const onCanplay = ev => {
  console.log(ev, "可以播放");
};
</script>

<style scoped></style>
